<template>
  <a-modal :title="title" :visible="visible" @ok="submit" width="1000px" @cancel="cancel">
    <div class="list" v-if="menus">
      <div class="item">
        <div class="let">快捷导出选择：</div>
        <div class="rig">
          <a-checkbox class="checkbox" :checked="allChecked" @change="all">全选</a-checkbox>
        </div>
      </div>

      <div class="item">
        <div class="let">选择导出数据项：</div>
        <div class="rig">
          <a-row>
            <template v-for="item of list">
              <a-col :span="4" v-if="!item.hidden">
                <a-checkbox class="checkbox" :checked="item.selected === 1" @change="select(item)">{{
                  item.value
                }}</a-checkbox>
              </a-col>
            </template>
          </a-row>
        </div>
      </div>
    </div>
    <div v-else>暂无内容</div>
  </a-modal>
</template>

<script>
export default {
  props: {
    menus: {
      type: Object,
      default() {
        return null
      }
    },

    title: {
      type: String,
      default: '数据导出'
    },

    params: {
      type: Object,
      default() {
        return null
      }
    },

    search: {
      type: Object,
      default() {
        return null
      }
    },

    exportUrl: {
      type: [String],
      default: ''
    }
  },

  watch: {
    menus: {
      handler(val) {
        let list = []
        for (let i in val) {
          let { key, value, hidden, selected } = val[i]

          if (!hidden) {
            list.push({
              key,
              value,
              hidden,
              selected
            })
          }
        }

        this.list = list
      },
      deep: true
    },

    list: {
      handler(val) {
        if (val.length) {
          if (val.every(el => el.selected === 1)) {
            this.allChecked = true
          } else {
            this.allChecked = false
          }
        }
      },
      deep: true
    }
  },

  data() {
    return {
      list: [],
      allChecked: false,
      visible: false
    }
  },

  methods: {
    ok() {
      this.$emit('ok')
    },

    cancel() {
      this.visible = false
      this.$emit('cancel')
    },

    all() {
      let { list } = this

      if (list.length) {
        let allChecked = false,
          selected = 0

        if (!this.allChecked) {
          allChecked = true
          selected = 1
        }

        list.forEach(el => {
          el.selected = selected
        })
        this.allChecked = allChecked
      }
    },

    select(item) {
      console.log(item);
      let checked = 0
      if (!item.selected) {
        checked = 1
      }
      this.$set(item, 'selected', checked)
    },

    submit() {
      let { list, params, menus } = this
      if (!menus) {
        this.visible = false
        return
      }

      if (!list.some(el => el.selected === 1)) {
        this.$message.error('至少选择一项~')
        return
      }

      let fields = {},
        url = `${this.exportUrl}&`

      list.forEach(({ selected, key, value }) => {
        if (selected) {
          fields[key] = value
        }
      })

      if (params) {
        for (let i in params) {
          url += `${i}=${params[i]}&`
        }
      }

      url += `fields=${JSON.stringify(fields)}&supplier_id=${params.supplier_id}&search=${JSON.stringify(this.search)}`
      window.open(url, '_blank')
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  .item {
    display: flex;
    font-size: 14px;
  }

  .let {
    text-align: right;
    color: #000;
    width: 120px;
  }

  .rig {
    flex: 1;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.65);
  }

  .checkbox {
    margin-bottom: 28px;
  }
}
</style>
